<div [formGroup]="dataModelPropertyForm">
  <mat-form-field class="full-width-input">
    <mat-label>Name</mat-label>
    <input #propertyNameInput matInput placeholder="Name of the property"
      formControlName="name" required (input)="onNameChanged(propertyNameInput.value)">
    <mat-error *ngIf="isFieldInvalid('name', 'required')">
      Please inform the property name
    </mat-error>
  </mat-form-field>
  <mat-form-field class="full-width-input">
    <mat-label>Label</mat-label>
    <input matInput placeholder="The display label of the property" formControlName="label">
  </mat-form-field>
  <mat-form-field class="full-width-input">
    <mat-select placeholder="Data Type" formControlName="dataType" (selectionChange)="onDataTypeChanged($event)">
      <mat-option *ngFor="let dataType of propertyDataTypes" [value]="dataType[0]">
        {{dataType[1]}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field class="full-width-input">
    <mat-select placeholder="Control Type" formControlName="controlType">
      <mat-option *ngFor="let controlType of propertyControlTypes" [value]="controlType[0]">
        {{controlType[1]}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <div>
    <mat-checkbox formControlName="isRequired">Is required?</mat-checkbox>
  </div>
  <div class="margin10">
    <mat-checkbox formControlName="isManaged">Is managed?</mat-checkbox>
  </div>
  <mat-divider class="margin10"></mat-divider>

  <mat-form-field class="full-width-input">
    <mat-select #relatedDataModelControl placeholder="Related Data Model" formControlName="relatedProjectDataModelId" (selectionChange)="onRelatedDataModelChanged($event)">
      <mat-option [value]="''"></mat-option>
      <mat-option *ngFor="let relatedDataModel of relatedDataModels" [value]="relatedDataModel.id">
        {{relatedDataModel.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field class="full-width-input">
    <mat-select #relationalTypeControl placeholder="Relational Type" formControlName="relationalType" (selectionChange)="onRelationalTypeChanged($event)">
      <mat-option [value]="''"></mat-option>
      <mat-option *ngFor="let relationalType of propertyRelationalTypes" [value]="relationalType[0]">
        {{relationalType[1]}}
      </mat-option>
    </mat-select>
    <mat-hint *ngIf="relationalTypeControl.selected != null">
      <div [ngSwitch]="relationalTypeControl.value">
        <div *ngSwitchCase="'one-to-one'">One {{dataModelName}} related to one {{relatedDataModelControl.selected ? relatedDataModelControl.selected.viewValue : ''}}</div>
        <div *ngSwitchCase="'one-to-many'">One {{dataModelName}} related to many {{relatedDataModelControl.selected ? relatedDataModelControl.selected.viewValue : ''}}</div>
        <div *ngSwitchCase="'many-to-many'">many {{dataModelName}} related to many {{relatedDataModelControl.selected ? relatedDataModelControl.selected.viewValue : ''}}</div>
      </div>
    </mat-hint>
  </mat-form-field>
</div>
